<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .el-step.is-horizontal, .el-step.is-vertical .el-step__head, .el-step.is-vertical .el-step__main, .el-step__line {
            display: inline-block
        }

        .el-step {
            position: relative;
            vertical-align: top
        }

        .el-step.is-vertical .el-step__main {
            padding-left: 10px
        }

        .el-step__line {
            position: absolute;
            border-color: inherit;
            background-color: #bfcbd9
        }

        .el-step__line.is-vertical {
            width: 2px;
            box-sizing: border-box;
            top: 32px;
            bottom: 0;
            left: 15px
        }

        .el-step__line.is-horizontal {
            top: 15px;
            height: 2px;
            left: 32px;
            right: 0
        }

        .el-step__line.is-icon.is-horizontal {
            right: 4px
        }

        .el-step__line-inner {
            display: block;
            border-width: 1px;
            border-style: solid;
            border-color: inherit;
            transition: all 150ms;
            width: 0;
            height: 0
        }

        .el-step__icon {
            display: block;
            line-height: 28px
        }

        .el-step__icon > * {
            line-height: inherit;
            vertical-align: middle
        }

        .el-step__head {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background-color: transparent;
            text-align: center;
            line-height: 28px;
            font-size: 28px;
            vertical-align: top;
            transition: all 150ms
        }

        .el-step__head.is-finish {
            color: #20a0ff;
            border-color: #20a0ff
        }

        .el-step__head.is-error {
            color: #ff4949;
            border-color: #ff4949
        }

        .el-step__head.is-success {
            color: #13ce66;
            border-color: #13ce66
        }

        .el-step__head.is-process, .el-step__head.is-wait {
            color: #bfcbd9;
            border-color: #bfcbd9
        }

        .el-step__head.is-text {
            font-size: 14px;
            border-width: 2px;
            border-style: solid
        }

        .el-step__head.is-text.is-finish {
            color: #fff;
            background-color: #20a0ff;
            border-color: #20a0ff
        }

        .el-step__head.is-text.is-error {
            color: #fff;
            background-color: #ff4949;
            border-color: #ff4949
        }

        .el-step__head.is-text.is-success {
            color: #fff;
            background-color: #13ce66;
            border-color: #13ce66
        }

        .el-step__head.is-text.is-wait {
            color: #bfcbd9;
            background-color: #fff;
            border-color: #bfcbd9
        }

        .el-step__head.is-text.is-process {
            color: #fff;
            background-color: #bfcbd9;
            border-color: #bfcbd9
        }

        .el-step__main {
            white-space: normal;
            padding-right: 10px;
            text-align: left
        }

        .el-step__title {
            font-size: 14px;
            line-height: 32px;
            display: inline-block
        }

        .el-step__title.is-finish {
            font-weight: 700;
            color: #20a0ff
        }

        .el-step__title.is-error {
            font-weight: 700;
            color: #ff4949
        }

        .el-step__title.is-success {
            font-weight: 700;
            color: #13ce66
        }

        .el-step__title.is-wait {
            font-weight: 400;
            color: #97a8be
        }

        .el-step__title.is-process {
            font-weight: 700;
            color: #48576a
        }

        .el-step__description {
            font-size: 12px;
            font-weight: 400;
            line-height: 14px
        }

        .el-step__description.is-finish {
            color: #20a0ff
        }

        .el-step__description.is-error {
            color: #ff4949
        }

        .el-step__description.is-success {
            color: #13ce66
        }

        .el-step__description.is-wait {
            color: #bfcbd9
        }

        .el-step__description.is-process {
            color: #8391a5
        }

        .el-steps {
            font-size: 0
        }

        .el-steps > :last-child .el-step__line {
            display: none
        }

        .el-steps.is-horizontal {
            white-space: nowrap
        }

        .el-steps.is-horizontal.is-center {
            text-align: center
        }

    </style>
</head>
<body ng-app="myApp">


<div ng-controller="myCtrl">
    111
    <span ng-repeat="data in datas" ng-click="getNumber(data)">
        {{data}}
    </span>

</div>


</body>
<script src="../libs/angular.js"></script>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope) {
        window.scope = $scope
        $scope.getNumber = function (num) {
            console.log(num)
            return new Array(num);
        }

        $scope.tabIndex = 0;
        $scope.setIndex = function (tabIndex) {
            $scope.tabIndex = tabIndex
        }

        $scope.step = 1;
        $scope.setStep = function (step) {
            $scope.step = step;
        }

        $scope.datas = [1, 2, 3]
    });


</script>
</html>